<template>
  <text :class="classNames" :style="fontStyle"></text>
</template>

<script lang="ts">
import { isNumber } from "@/utils/is";
import { computed, defineComponent } from "vue";
const icon = defineComponent({
  name: "Icon",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  props: {
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: void 0,
    },
    size: {
      type: [Number, String],
      default: void 0,
    },
    spin: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const prefixCls = "arco-icon";
    const fontStyle = computed(() => {
      const result: any = {};
      if (props.color) {
        result.color = props.color;
      }
      if (props.size) {
        result.fontSize = isNumber(props.size)
          ? `${props.size}rpx`
          : props.size;
      }
      // if (props.fontSize) {
      //     result.fontSize = props.fontSize+'rpx'
      // }
      return result;
    });

    const classNames = computed(() => [
      prefixCls,
      `iconfont icon-${props.name}`,
      {
        [`${prefixCls}-loading`]: props.spin,
      },
    ]);

    return {
      classNames,
      fontStyle,
    };
  },
});
export default icon;
</script>

<style lang="scss" scoped>
// .arco-icon {
// display: inline-block;
// color: inherit;
// font-style: normal;
// outline: none;
// font-size: 1em;
// }
// .arco-icon::after {
//   // text-align: center;
// }
// .arco-icon-loading,
// .arco-icon-spin {
//   animation: arco-loading-circle 1s infinite cubic-bezier(0, 0, 1, 1);
// }
// @keyframes arco-loading-circle {
//   0% {
//     transform: rotate(0);
//   }
//   100% {
//     transform: rotate(360deg);
//   }
// }
</style>
